<template>
  <a-modal :title="titleMap" :width="550" :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }" @ok="submit" @cancel="close"
    :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" layout="horizontal">
      <a-form-item :label="$t('user.verification-code.required11156611057737144226')">
        <a-input :placeholder="$t('user.verification-code.required11156611057737144226')"
          v-decorator="['Userchange', { rules: [{ required: true, message: $t('user.verification-code.required11156611057737144226') }] }]">
        </a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
  
<script>

import { dpiaChange } from '@/api/dpia/form'

export default {
  props: {
    Exid: {
      type: Number
    },
    idname: {
      type: Number
    },
    id: {
      type: Number
    },
    username: {
      type: String
    }

  },
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      userList: [],
      // 这个要根据服务修改title
      titleMap: '',
      // titleMap: ['新建', '修改'],
      mode: 0,
    }
  },
  methods: {
    async open(data = {}) {
      this.titleMap = this.$t('user.verification-code.required11156611057737144226')
      this.visible = true
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据 
      // force: true 是默认所有字段都校验
      // values 表单的值 
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values }
            console.log('params', params.Userchange);
            // 判断状态是新增还是修改 调用不同的api
            await dpiaChange({ DpiaQid: this.id, DpiaChapterId: this.Exid, DpiaChapterDcoRemark: params.Userchange })
            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit('succeed')
            this.$message.success(this.$t('menu.account.logout11229922779945445432654445566'))
            //如果成功就关闭
            this.close()
          } catch (error) {
            console.log('err', error)
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
    },
    // 关闭 通用的 
    close() {
      // 修改侧边栏状态
      this.visible = false
      // 清空form的值
      this.form.resetFields()
    },
  }
}
</script>
  
<style lang="less" scoped>
/deep/.ant-form-item-label {
  display: inline-block;
  overflow: visible;
  line-height: 39.9999px;
  text-align: right;
  vertical-align: middle;
  margin-right: 20px !important;
}
</style>